<template>
    <div>
        <div style="margin: 10px 0;padding-bottom: 50px">
            <el-row :gutter="10">
                <el-col :span="6" v-for="e in listData" :key="e.id" style="margin-bottom: 10px">
                    <div style="border: 1px solid #ccc; padding-bottom: 10px">
                        <img :src="e.img" alt="" style="width: 100%;height: 150px">
                        <div style="padding: 5px;font-size: 16px;font-weight: bold;">考试名称：{{ e.name }}</div>
                        <div style="padding: 5px">开始时间：{{ e.startTime }}</div>
                        <div style="padding: 5px">结束时间：{{ e.endTime }}</div>
                        <div style="padding: 5px">发布者：{{ e.user }}</div>
                        <div style="padding: 5px">
                            <el-button
                                    :disabled="e.isExam==='已考试'"
                                    @click="showDialog(e)"
                                    type="primary">
                                {{e.isExam}}
                            </el-button>
                        </div>
                    </div>
                </el-col>
            </el-row>

            <div style="margin-top: 20px">
                <el-pagination
                        @current-change="currentChange"
                        @size-change="sizeChange"
                        :page-size="pageInfo.pageSize"
                        :current-page="pageInfo.currentPage"
                        background
                        layout="sizes, prev, pager, next"
                        :total="total">
                </el-pagination>
            </div>

        </div>

        <!-- 弹窗 -->
        <el-dialog
                title="温馨提示"
                :visible.sync="dialogVisible"
                width="30%"
                :before-close="handleClose">
            <span>考试过程中不允许退出考试页面，每人仅有一次答题机会！</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="goToExam">确定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "ExamList",
        data() {
            return {
                //总条数
                total: 0,
                listData: [],
                //分页详情
                pageInfo: {
                    //当前页
                    pageNum: 1,
                    //分页大小
                    pageSize: 10
                },
                dialogVisible: false, // 控制对话框显示
                currentExam: null // 当前点击的考试对象
            }
        },
        created() {
            this.getPageList()
        },
        methods: {
            //获取分页数据
            getPageList() {
                this.$axios.get("/exam/pageAll", {
                    params: this.pageInfo
                }).then(res => {
                    this.listData = res.data.list
                    this.total = res.data.total
                })
            },
            //选择分页
            currentChange(e) {
                this.pageInfo.pageNum = e
                this.getPageList()
            },
            //改变分页数量
            sizeChange(e) {
                this.pageInfo.pageSize = e
                this.getPageList()
            },
            showDialog(e) {
                this.currentExam = e;
                this.dialogVisible = true;
            },
            handleClose(done) {
                this.$confirm('确认关闭？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    done();
                }).catch(() => {});
            },
            goToExam() {
                this.dialogVisible = false;
                if (this.currentExam) {
                    this.$router.push({
                        path: '/front/examPaper?',
                        query: {
                            ids: this.currentExam.question,
                            examName: this.currentExam.name,
                            endTime: this.currentExam.endTime,
                            type: '考试',
                            id: this.currentExam.id,
                            teacherId: this.currentExam.userId
                        }
                    });
                }
            }
        }
    }
</script>

<style scoped>
    .el-button {
        font-size: 18px; /* 增大按钮字体大小 */
        padding: 12px 18px; /* 增大按钮内边距 */
    }
</style>